<template>
	<view class="container">
		<!-- 新闻标题 -->
		<view class="news-title animated-item" style="animation-delay: 0.1s">
			<u-text :text="newsDetail.title" size="20" bold align="center"></u-text>
		</view>

		<!-- 作者信息 -->
		<view class="author-info animated-item" style="animation-delay: 0.2s">
			<u-avatar :src="baseUrl+newsDetail.userAvatar" size="40"></u-avatar>
			<view class="author-meta">
				<text class="author-name">{{ newsDetail.createBy }}</text>
				<text class="create-time">{{ formatDateTime(newsDetail.createTime) }}</text>
			</view>
		</view>

		<!-- 封面图片 -->
		<image 
			v-if="newsDetail.coverImage" 
			class="detail-cover animated-item" 
			:src="baseUrl+newsDetail.coverImage" 
			mode="widthFix"
			style="animation-delay: 0.3s"
		></image>

		<!-- 新闻内容 -->
		<view class="news-content animated-item" style="animation-delay: 0.4s">
			<u-parse :content="newsDetail.content" :tag-style="tagStyle"></u-parse>
		</view>
	</view>
</template>

<script>
	import {
		getStudynews
	} from '@/api/studytourism/studynews';
	import config from '../../../config';
	export default {
		data() {
			return {
				baseUrl: config.baseUrl,
				newsId: null,
				newsDetail: {},
				tagStyle: {
					p: 'line-height: 1.8; margin-bottom: 20rpx;',
					img: 'max-width: 100%; border-radius: 8rpx; margin: 10rpx 0;'
				}
			}
		},
		onLoad(options) {
			this.newsId = options.newsId;
			this.loadNewsDetail(this.newsId);
		},
		methods: {
			async loadNewsDetail(newsId) {
				const res = await getStudynews(newsId)
				if (res) {
					this.newsDetail = res.data;
				} else {
					uni.showToast({
						title: '新闻不存在',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},
			formatDateTime(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.news-title {
		padding: 20rpx 0;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #ebeef5;
	}

	.author-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f5f7fa;
	}

	.author-meta {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.author-name {
		font-size: 28rpx;
		color: #303133;
		font-weight: bold;
	}

	.create-time {
		font-size: 24rpx;
		color: #909399;
		margin-top: 5rpx;
	}

	.detail-cover {
		width: 100%;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.news-content {
		font-size: 30rpx;
		line-height: 1.8;
		color: #606266;
		padding-bottom: 50rpx;
	}

	/* 新增动画样式 */
	.animated-item {
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>